<template>
  <view class="bg-white">
    <text class="uni-body">{{forum.title}}</text>
    <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
                 @scrolltolower="lower" >
      <uni-card :cover="forum.thumImg">
        <text class="uni-body">{{forum.content}}</text>
      </uni-card>
      <uni-section title="评论" class="" type="line" ></uni-section>
      <view class="padding-left-sm padding-right-sm padding-bottom-sm">

        <view class="padding-xs" v-for="item in replyList">
          <view class="flex align-center justify-between">
            <view>{{ item.nickName }}:</view>
            <view>{{item.createTime}}</view>
          </view>
          <view class="margin-top-xs">{{item.content}}</view>
        </view>

      </view>
    </scroll-view>
    <view class="bottom bg-white solid-top padding-xs">
      <uni-row class="demo-uni-row flex align-center justify-between">
        <uni-col :span="19">
          <uni-easyinput class="uni-mt-5" trim="all" v-model="comments" placeholder="请输入内容" @input="input"></uni-easyinput>
        </uni-col>
        <uni-col :span="4" >
          <button class="button text-lg" type="primary" @click="onsubmit">评论</button>
        </uni-col>
      </uni-row>
    </view>
  </view>
</template>

<script>
import {getForumDetail, replyForum} from "../../api/flower/forum";
import {baseUrl} from "../../config";

export default {
  name: "forumDetil",
  data() {
    return {
      cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
      scrollTop: 0,
      comments:"",
      forum:{},
      replyList:[]
    }
  },
  //生命周期函数
  mounted() {
    this.findDetail();
  },
  methods: {
    lower: function(e) {
      console.log(e)
    },
    onClick(e) {
      console.log(e)
    },
    input(e) {
      console.log('输入内容：', e);
    },
    onsubmit(){
      let that =this;
      //判断comments是否为空
      if(this.comments==""){
        uni.showToast({
          title: '评论不能为空',
          icon: 'none'
        });
      }else{

        //调接口
        //forumId
        replyForum({
          content:that.comments,
          forumId:that.forumId
        }).then(res => {
          console.log(res);
          console.log(res.data);
          //弹出评论成功
          uni.showToast({
            title: '评论成功',
            icon: 'none'
          });
          //清空评论
          this.comments = "";
          //刷新此页面
          uni.redirectTo({
            url: '/pages/forum/forumDetail'
          })
        });
      }


    },
    findDetail(){
      let that = this;
      let forumId = uni.getStorageSync('forumId');
      this.forumId = forumId;
      //查询帖子和评论
      getForumDetail({
        id:forumId
      }).then(res => {
        //thum_img 前面拼接baseUrl

        //res.rows.thumImg = baseUrl + res.rows.thumImg;
        let forum = res.data.forum;
        forum.thumImg = baseUrl + forum.thumImg;
        let replyList = res.data.replyList;
        that.forum = forum;
        that.replyList = replyList;
        console.log(res);
      })

    }
  }
}
</script>

<style lang="less" scoped>
.bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  //height: 80rpx;
  //border: 1px solid red;

}


</style>